<?php
/**
 * Created by JetBrains PhpStorm.
 * User: Binh
 * Date: 1/6/14
 * Time: 12:43 PM
 * To change this template use File | Settings | File Templates.
 */
?>
<div id="songContent" style="width: 500px;">
    <div id="fb-root"></div>
    <!-- facebook plugin -->
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=810591248955996";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

    <!-- collapsible lyrics -->
    <script>
        jQuery(document).ready(function($){
            $('.collapsible').hover(
                function(){
                    $(this).css('text-decoration','underline');
                },
                function(){
                    $(this).css('text-decoration','none');
                });
            $('.collapsible').next().hide();
            $('.collapsible').click(function(){
                $(this).next().slideToggle();
            });
        });
    </script>

    <div id="songInfo">
        <h2>
            <?php echo $play_song['SONG_NAME'];?> -
            <a href="<?php echo Uri::create('singer/communication/').$play_song['SINGER_ID']; ?>" >
                <?php echo $play_song['SINGER_NAME']; ?>
            </a>
        </h2>
        <h5> Uploader: <?php echo $play_song['USER_NAME']; ?></h5>
        <h4> Tag: <a href='#'> <?php echo $play_song['GENRE_NAME']; ?> </a></h4>
        <div class="fb-like" data-href="http://nhacprouit.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>
    <div id="songPlayer">
        <audio controls  style="width: 500px;">
            <source src="<?php echo $path_music.$play_song['PATH'];?>"
                    type="audio/mpeg">
        </audio>
    </div>
    <div id="songNavi" style="position: relative;">
        <button type="button">Like</button>
        <button type="button">Dislike</button>
        <div id="favoriteBar" style=" position: absolute; top: -20px; right: 0px; width: 200px;">
            <h5>Views: <?php echo "0"; ?></h5>
            <div id="likeBar" style=" width: 30%; float: left; background:red; display:block; height: 5px; ">
            </div>

            <div id="dislikeBar" style="width: 70%; float: left; background:blue; display:block; height: 5px;">
            </div>
        </div>
    </div>
    <h4 class="collapsible"> Lời bài hát</h4>
    <div id="songLyrics">
        <pre><?php echo null; ?></pre>
    </div>
    <div id="sharingNavi">
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1&appId=810591248955996";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>

        <div class="fb-comments" data-href="http://abc.xyz" data-colorscheme="light"
             data-numposts="5" data-width="500"></div>
    </div>
</div>
<div id="relativeSong">
    <h3> Bài hát liên quan</h3>
    <ul id="rsListContent">
        <?php
        foreach($songs as $song){
            if($song['SONG_ID'] == $play_song['SONG_ID']){
                continue;
            }
        ?>
            <li class="rsASong">
                <div class="rsSongName">
                    <?php echo Asset::img('home/songIcon.png');?>
                    <a href="<?php echo Uri::create('song/play_song/').$song['SONG_ID']; ?>" >
                        <?php echo $song['SONG_NAME']; ?>
                    </a>
                </div>
                <div class="rsSingerName">
                    <?php echo Asset::img('home/micIcon.png'); ?>
                    <a href="<?php echo Uri::create('singer/communication/').$song['SINGER_ID']; ?>" >
                        <?php echo $song['SINGER_NAME']; ?>
                    </a>
                </div>
                <div class="rsView">
                    <?php echo Asset::img('home/headphoneIcon.png'); ?>
                    <?php echo $song['VIEW'];?> </div>
            </li>
        <?php
        }
        ?>
    </ul>

</div>